<template>
	<view>
		<view style="text-align: center;font-size: 40rpx;font-weight: 600;color: #16b173;padding: 20rpx;">
			教育的艺术在于鼓舞和唤醒
		</view>
		<view v-show="selectindex != 2">
			<image style="width: 100%;" src="../../static/img/VIPcustom/1712207212418.jpg" mode="widthFix"></image>
		</view>
		<!-- 场景3 -->
		<view style="display: flex;justify-content: center; margin-bottom: 40rpx;" v-show="selectindex == 2">
			<video style="width: 100%;" src='https://zyc618.mynatapp.cc/images/show.mp4' controls></video>
		</view>
		<!-- 导航栏 -->
		<view style="position: relative;display: flex;justify-content: space-around;align-self: center;">
			<view style="" v-for="item in viplist" :key="item.id" @tap="isselect(item.id)">
				<view class="viplistselect">
					<view class="" :style="selectindex=== item.id ? 'font-weight: 600;' : ''">
						{{item.title}}
					</view>
					<view class="linemy" v-show="selectindex === item.id? true:false">
					</view>
				</view>

			</view>
		</view>

	
		
	<!-- 场景1 测评报告-->
	<view style="margin-top: 20rpx;padding: 10rpx;"  v-if="selectindex == 1">
		<view >
			<linechart></linechart>
		</view>
		
		<view style="margin-top: 20rpx;">
			
		</view>
		
	</view>
	<!-- 场景2 课程大纲-->
	<template >
		<view class="" v-show="selectindex == 2">
			<vipcontentscene2 :vipcontentscene_2="vipcontentscene_2"></vipcontentscene2>
			
		</view>
		
	</template>
	<!-- 场景4 -->
	<view class="" v-show="selectindex == 4">
		<vipcontentdata :contentdata="contentdata"></vipcontentdata>
	</view>
	<!-- 场景5 -->
	<view class="" v-show="selectindex == 5">
		<RadarChart></RadarChart>
	</view>
	</view>
</template>

<script>
	import myline from '@/components/common/Lines.vue'
	import linechart from '@/components/linechart/linechart.vue'
	import Nightingale from '@/components/Nightingale/Nightingale.vue'
	import $http from '@/common/api/request.js'
	import vipcontentdata from '@/components/vipcontentdata.vue'
	import vipcontentscene2 from '@/components/vipcontentscene2.vue'
	import RadarChart from '@/components/RadarChart/RadarChart.vue'
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				viplist: [{
						id: 1,
						title: "测评报告"
					},
					{
						id: 2,
						title: "课程大纲"
					},
					{
						id: 4,
						title: "资料手册"
					},
					{
						id: 5,
						title: "学情报告"
					}
				],
				selectindex: 2,
				isshowdetail: true,
				theindex:0,
				contentdata:[],
				vipcontentscene_2:[]
			};
		},
		computed:{
			...mapState({
				loginStatus:state=>state.user.loginStatus,
				userInfo:state=>state.user.userInfo
			})
		},
		methods: {
			//下面的阴影效果
			isselect(index) {
				this.selectindex = index
			},
			//点击详情:
			swipisshow() {
				this.isshowdetail = !this.isshowdetail;
			},
			getdatalist(index){
				uni.showToast({
					title:"请稍等..",
					icon:"none",
					duration:500,
					mask:true,
					success: () => {
						$http.request({
					url: "/getcontent",
					method:"POST",
					data:{
						userid:this.userInfo.id,
						teacherid:index
					}
					}).then((res) => {
						
						this.contentdata=res.results
					}).catch(() => {
						
					})
						}
					})
				
			},
			getvipdetcon(index){
				uni.showToast({
					title:"请稍等..",
					icon:"none",
					duration:500,
					mask:true,
					success: () => {
						$http.request({
					url: "/save/getallcosingAssistance",
					method:"POST",
					data:{
						keyword:JSON.stringify({
							userid:this.userInfo.id,
							teacherid:index
						}),
						apppost:1
					}
					}).then((res) => {
						this.vipcontentscene_2 = res.data.map(item=>{
							item.isshowdetail = false
							return item
						})
						
					}).catch(() => {
						
					})
						}
					})
			}
		},
		components: {
			myline,linechart,Nightingale,vipcontentdata,vipcontentscene2,RadarChart
		},
		onLoad(e) {
			this.theindex = e.keyword;
			this.theindex = 117
			this.getdatalist(e.teacherid)
			this.getvipdetcon(e.teacherid)
		}
	}
</script>

<style lang="scss">
	.viplistselect {

		position: relative;
	}

	.linemy {
		position: absolute;
		z-index: -1;
		top: 30rpx;
		left: 0;
		width: 125rpx;
		border-bottom: 12rpx solid #e6463e;
	}

	.packdetail {
		display: flex;
		padding: 10rpx 30rpx;
		.packdetail_left {
			width: 30%;
		}

		.packdetail_right {
			width: 70%;
			margin-left: 10rpx;
		}

	}

	.theline{
		margin-top: 30rpx;
		padding: 10rpx 20rpx;
		height: 40rpx;
		.line-right{
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;
			align-self: center;
			
		}
	}
	.conitem{
			padding: 30rpx 10rpx 0 10rpx;
			
		}
	.all{
		display: flex;
		position: relative;
		
		.img{
			width: 60rpx;
			height: 60rpx;
		}
		.title{
			display: flex;
			font-weight: 600;
			align-self: center;
			color:#8298b6;
		}
		
	}
	.mycline{
		position: absolute;
		height: 150px  !important;
		left: 30rpx;
		top: 40rpx;
		border-left: 5rpx solid #8298b6;
	}
</style>